[睡醒來聽 PHP 與 MySQL] DAY18 COOKIE介紹

15th鐵人賽

Rina

2023-10-03 00:01:37

439 瀏覽

分享至

Welcome 歡迎來到「睡醒來聽 PHP 與 MySQL」系列！

DAY18 今天要學甚麼?今天理解甚麼是COOKIE

🔶章節:
🔹[開頭]
🔹[COOKIE的完整名稱與由來]
🔹[什麼是COOKIE？]
🔹[如何工作]
🔹[有什麼用途]
🔹[設置COOKIE的步驟]
🔹[模擬一個偏好設定頁面]
🔹[設定過期時間]
🔹[總結]

如果影片中不清楚，需要補充的地方我會再添加到這邊~

模擬一個偏好設定頁面

模擬一個偏好設定頁面，使用者可以在頁面中設定他們喜歡的主題顏色，並且我們將記錄使用者訪問網頁的次數。

步驟1：設定頁面 (index.php)

我們要建立一個設定頁面，讓使用者可以選擇主題顏色。

<html>
<head>
    <title>偏好設定</title>
</head>
<body>
    <h1>選擇你喜歡的主題顏色：</h1>
    <form method="post" action="process.php">
        <label><input type="radio" name="color" value="#CD5C5C" style="background-color: var(--morandi-red);">宮廷紅</label>
        <label><input type="radio" name="color" value="#76B4EF" style="background-color: var(--morandi-blue);">天空藍</label>
        <label><input type="radio" name="color" value="#8AB6A6" style="background-color: var(--morandi-green);">草地綠</label>
        <button type="submit">儲存設定</button>
    </form>
</body>
</html>

透過單選按鈕（radio）讓使用者選擇不同的顏色，每個按鈕代表一種顏色，分別是「宮廷紅」（#CD5C5C）、「天空藍」（#76B4EF）、和「草地綠」（#8AB6A6）。按下「儲存設定」按鈕後，選擇的顏色值將以 POST 方法提交到 "process.php" 進行後續處理。

步驟2：處理表單數據 (process.php)

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if(isset($_POST['color'])) {
        $selectedColor = $_POST['color'];
        setcookie("user_color", $selectedColor, time() + 3600); // 設定COOKIE，一小時後過期
    }
    header("Location: set.php"); // 返回設定頁面
}
?>

當使用者提交表單時（HTTP 方法為 POST），程式會檢查是否有選擇顏色，如果有選擇，則取得選擇的顏色值並設定為 Cookie。setcookie 函式用來設定 Cookie，將選擇的顏色儲存在名為 "user_color" 的 Cookie 中，並設定 Cookie 的過期時間為當前時間加上 3600 秒（一小時後過期）。最後，程式會將使用者重新導向回設定頁面（"set.php"）。

步驟3：改變背景顏色和計算訪問次數

<?php
    session_start();

    if(isset($_COOKIE['user_color'])) {
        $userColor = $_COOKIE['user_color'];
        $colorNames = [
            '#CD5C5C' => '宮廷紅',
            '#76B4EF' => '天空藍',
            '#8AB6A6' => '草地綠'
        ];

        echo "<h1>你選擇了 {$colorNames[$userColor]} 主題。</h1>";
    } else {
        echo "<h1>尚未設定主題。</h1>";
    }

    if(isset($_SESSION['visit_count'])) {
        $_SESSION['visit_count']++;
    } else {
        $_SESSION['visit_count'] = 1;
    }
    $visitCount = $_SESSION['visit_count'];
    echo "<p class='visit-count'>你已經訪問了本網頁 $visitCount 次。</p>";
    ?>
    <div class="message">
        <a href="index.php">返回設定</a>
    </div>

這段程式碼是一個網頁的後端處理部分，它主要用來處理與使用者主題顏色相關的事務。
檢查是否有名為 "user_color" 的 Cookie 存在，如果存在則取得該 Cookie 儲存的顏色值，並透過關聯陣列將該顏色對應到中文名稱，然後顯示在網頁上，告訴使用者他所選擇的主題顏色。
若該 Cookie 不存在，則顯示「尚未設定主題」，表示使用者尚未選擇主題顏色。
也追蹤了使用者訪問網頁的次數，使用了 PHP 的 $_SESSION 來記錄訪問次數。每次訪問網頁時，它會檢查是否已經設定過 $_SESSION['visit_count']，若有則增加次數，若無就會初始化為 1。最後，將訪問次數顯示在網頁上，告知使用者已經訪問了多少次。